<template>
  <div>
    <el-form
      :inline="true"
      :model="searchForm"
      size="mini"
      class="demo-form-inline"
    >
      <el-form-item label="队名">
        <el-input
          v-model="searchForm.teamName"
          placeholder="请输入队名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="onAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <el-row>
      <el-col
        :span="6"
        v-for="team in teams"
        v-bind:key="team.id"
        style="padding: 5px"
      >
        <el-card
          :body-style="{ padding: '5px' }"
          @click.native="editTeam(team)"
        >
          <el-image :src="team.logo" class="image">
            <div
              slot="error"
              class="image-slot"
              style="
                width: 100%;
                height: 100%;
                text-align: center;
                padding-bottom: auto;
              "
            >
              <i
                class="el-icon-picture-outline"
                style="width: 130px; height: 130px"
              ></i>
              <div></div>
            </div>
          </el-image>
          <div style="width: 100%; text-align: center; padding-bottom: 5px">
            {{ team.name }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 添加dialog -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="队名" prop="name">
          <el-input v-model="form.name" placeholder="请输入队名" />
        </el-form-item>
        <el-form-item label="LOGO" prop="logo">
          <el-input v-model="form.logo" placeholder="请输入LOGO链接" />
        </el-form-item>
        <el-form-item label="队伍介绍" prop="desc">
          <el-input v-model="form.desc" placeholder="请输入队伍描述" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "teams",
  components: {},
  data() {
    return {
      searchForm: {
        teamName: "",
      },
      form: {},
      updating: false,
      open: false,
      title: "新增队伍",
      teams: [
        {
          id: "sfdffd",
          name: "EDG",
          logo:
            "https://img.crawler.qq.com/lolwebvideo/20180925110059/69d20800d8dad53348ff74ce3d1ab737/0",
          desc:
            "EDWARD GAMING（简称：EDG）电子竞技俱乐部于2013年9月13日正式成立，旗下拥有多个分部，是国内最具实力的综合性电子竞技俱乐部之一。 在英雄联盟职业联赛（LPL）中，EDG共五次获得联赛冠军，是目前唯一一支斩获三连冠的队伍；德玛西亚杯中EDG斩获六次冠军奖杯，有着“六冠王”的美誉；2015年EDG夺得第一届英雄联盟季中冠军赛（MSI）的总冠军；连续五年代表LPL征战LOL全球总决赛。2021赛季，EDG英雄联盟分部组建全新强力阵容，传奇选手明凯Clearlove重回选手阵容，将向英雄联盟新的荣耀发起冲击！",
        },
      ],
    };
  },
  created() {
    this.getTeams();
    this.teamNameIndex();
  },
  methods: {
    getTeams() {
      let that = this;
      this.$db.teams.loadDatabase();
      this.$db.teams.find({}, function (err, docs) {
        if (docs.length > 0) {
          that.teams = docs;
        }
      });
    },
    onSubmit() {
      let that = this;
      this.$db.teams.loadDatabase();
      this.$db.teams.find(
        {
          $where: function () {
            return this.name.indexOf(that.searchForm.teamName) > -1;
          },
        },
        function (err, docs) {
          that.teams = docs;
        }
      );
    },
    editTeam(team) {
      console.log("editTeam:", team);
      this.updating = true;
      this.form = team;
      this.open = true;
    },
    onAdd() {
      this.reset();
      this.open = true;
    },
    submitForm() {
      console.log("insert team:", this.form);
      let that = this;
      if (this.updating) {
        this.$db.teams.loadDatabase();
        this.$db.teams.update(
          { _id: that.form._id },
          that.form,
          {},
          function (err, numReplaced) {
            that.open = false;
            if (err) {
              that.$message({
                showClose: true,
                message: "修改失败",
                type: "error",
              });
            } else {
              that.$message({
                showClose: true,
                message: "操作成功",
                type: "success",
              });
            }
          }
        );
        return;
      } else {
        this.$db.teams.loadDatabase();
        this.$db.teams.insert(this.form, function (err, teamInserted) {
          that.open = false;
          if (err) {
            that.$message({
              showClose: true,
              message: "队伍名称重复！添加失败",
              type: "error",
            });
          } else {
            that.$message({
              showClose: true,
              message: "操作成功",
              type: "success",
            });
            that.teams.push(teamInserted);
          }
        });
      }
      this.getTeams();
    },
    teamNameIndex() {
      this.$db.teams.loadDatabase();
      this.$db.teams.ensureIndex(
        { fieldName: "name", unique: true },
        function (err) {
          console.log("err index:", err);
        }
      );
    },
    reset() {
      this.form = {};
    },
    cancel() {
      this.open = false;
      this.reset(); //表单重置
    },
  },
};
</script>

<style>
.image {
  width: 100%;
  height: 100%;
}
</style>
